<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>哈希</title>
</head>
<body>
<div>
    <a href="#/a">a页面</a>
    <a href="#/b">b页面</a>
    <a href="#/c">c页面</a>
    <a href="#/d">d页面</a>
    <div id="router-view"></div>
</div>
</body>

<script>
    const dom = document.getElementById("router-view")
    // 监听哈希值的变化
    // 通过哈希值的不同，模拟了不同的路由
    window.addEventListener("hashchange", a => {
        console.log(location.hash)
        console.log(location.hash.slice(1))
        render(location.hash.slice(1))
    })
    render("/a")

    function render(urlHash) {
        switch (urlHash) {
            case "/a":
                dom.innerHTML = "这里是a页面"
                break;
            case "/b":
                dom.innerHTML = "这里是b页面"
                break;
            case "/c":
                dom.innerHTML = "这里是c页面"
                break;
            case "/d":
                dom.innerHTML = "这里是d页面"
                break;
        }
    }
</script>
</html>